$(function() {
    var layer = layui.layer
    var form = layui.form
    var laypage = layui.laypage

    initLinks();
    // 获取友情链接列表并渲染数据的方法
    function initLinks() {
        $.ajax({
            method: 'GET',
            url: '/admin/links',
            success: function(res) {
                console.log(res);
                if (res.status !== 0) {
                    return layer.msg('获取友情链接列表失败！')
                }
                // 使用模板引擎渲染页面的数据
                var htmlStr = template('tpl-table', res)
                $('tbody').html(htmlStr);
            }
        });
    };

    var file // 保留图片路径
    var filelist = []
    var imgURL
        // 为添加链接绑定 点击 事件
    $('#add-link').on('click', function() {
        console.log('ok');
        var index = layer.open({
            type: 1,
            title: ['添加链接', 'font-size:18px; color:orange;'],
            area: '500px',
            content: $('#add-form-tpl').html()
        });
        // 为上传图片的按钮，绑定点击事件处理函数
        $('#urlIcon').on('click', function() {
            $('#linkFile').click()
        })
        $('body').on('change', '#linkFile', function(e) {
            // 获取用户选择的文件
            filelist = e.target.files
            if (filelist.length === 0) {
                return layer.msg('请选择照片！')
            }
            // 1. 拿到用户选择的文件
            file = e.target.files[0]
            console.log(file);
            // 2. 将文件，转化为路径
            imgURL = URL.createObjectURL(file)
                // 3. 重新初始化裁剪区域
            $('#preIcon').attr('src', imgURL)
            console.log(imgURL);
        })


        // 为表单绑定 submit 提交事件
        $('#add-form').on('submit', function(e) {
            // 1. 阻止表单的默认提交行为
            e.preventDefault();
            // 2. 基于 form 表单，快速创建一个 FormData 对象
            var fd = new FormData($(this)[0]);
            console.log(fd);
            $.ajax({
                type: "POST",
                url: "/admin/links",
                data: fd, //格式{key:value}
                // 注意：如果向服务器提交的是 FormData 格式的数据，
                // 必须添加以下两个配置项
                contentType: false,
                processData: false,
                success: function(res) {
                    console.log(res);
                    if (res.status !== 0) {
                        return layer.msg('添加友情链接失败')
                    }
                    layer.msg('添加友情链接成功')
                    layer.close(index)
                    initLinks();
                }
            })
        })
    })

    // 点击上传图片
    $('body').on('click', '#urlIcon', function() {
        $('#linkFile').click()
    })
    var file
        // 保留图片路径
    $('body').on('change', '#linkFile', function(e) {
        // 获取用户选择的文件
        var filelist = e.target.files
        if (filelist.length === 0) {
            return layer.msg('请选择照片！')
        }
        // 1. 拿到用户选择的文件
        file = e.target.files[0]
        console.log(file);
        // 2. 将文件，转化为路径
        var imgURL = URL.createObjectURL(file)
            // 3. 重新初始化裁剪区域
        $('#preIcon').attr('src', imgURL)
        console.log(imgURL);
    })




    // 通过代理的形式，为删除按钮绑定点击事件处理函数
    $('tbody').on('click', '.delete', function() {
        // 获取到文章的 id
        var id = $(this).attr('data-id');
        console.log(id);
        // 询问用户是否要删除数据
        layer.confirm('确认删除?', { icon: 3, title: '提示' }, function(index) {
            $.ajax({
                type: 'DELETE',
                url: '/admin/links/' + id,
                success: function(res) {
                    if (res.status !== 0) {
                        return layer.msg('删除友情链接失败！')
                    }
                    layer.msg('删除友情链接成功！')
                    initLinks()
                }
            })
            layer.close(index)
        })
    })

    // 通过代理的形式，为编辑按钮绑定点击事件处理函数
    $('tbody').on('click', '.edit', function() {
        // 获取到文章的 id
        var id = $(this).attr('edit-id');
        var index = layer.open({
            type: 1,
            title: ['编辑链接', 'font-size:18px; color:orange;'],
            area: '500px',
            content: $('#edit-form-tpl').html()
        });
        // 获取原本的图片地址



        // 根据id查询友情链接详情
        $.ajax({
            method: 'GET',
            url: '/admin/links/' + id,
            success: function(res) {
                form.val('editForm', res.data)
            }
        })

        // 为上传图片的按钮，绑定点击事件处理函数
        $('#urlIcon').on('click', function() {
            $('#linkFile').click()
        });
        // 监听 linkFile 的 change 事件，获取用户选择的文件列表
        $('#linkFile').on('change', function(e) {
            // 获取到文件的列表数组
            var files = e.target.files;
            // 1. 拿到用户选择的文件
            file = e.target.files[0]
            console.log(file);
            filelist = files
            console.log(files);
            console.log(filelist.length);
            // 判断用户是否选择了文件
            if (files.length === 0) {
                return
            }
            // 根据文件，创建对应的 URL 地址
            var reader = new FileReader();
            reader.readAsDataURL(files[0]); //实例化一个 FileReader 对象
            reader.onload = function() { //设置文件读取后的处理方法
                $('#preIcon').prop('src', reader.result); //this.result中是读取到的图片数据，将其设置为图片 src 值，图片就可以显示出来。
            }
        });

        // 提交编辑的友情链接
        // 通过代理的形式，为编辑友情链接的表单绑定 submit 事件
        $('#edit-form').on('submit', function(e) {
            e.preventDefault();
            // 2. 基于 form 表单，快速创建一个 FormData 对象
            var fd = new FormData($(this)[0]);
            if (filelist.length >= 1) {
                fd.append('linkicon', file)
                console.log(file);
                console.log(fd);
            }
            $.ajax({
                method: 'PUT',
                url: '/admin/links/' + id,
                data: fd,
                contentType: false,
                processData: false,
                success: function(res) {
                    if (res.status !== 0) {
                        return layer.msg('编辑友情链接失败！')
                    }
                    layer.msg('编辑友情链接成功！')
                    layer.close(index)
                    initLinks();
                }
            })
        })
    })

})